<template>
	<view class="fui-wrap">
		<swiper class="fui-banner__wrap" circular @change="changeSwiper" :current="current" :indicator-dots="false" :autoplay="false" :interval="4000" :duration="150">
			<swiper-item>
				<view :class="(detail && detail.entry_photo.endsWith('nopic.jpg'))?'nopic':'havapic'">
					<image :src="detail.entry_photo" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view :class="(detail && detail.exit_photo.endsWith('nopic.jpg'))?'nopic':'havapic'">
					<image :src="detail.exit_photo" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="tag-box">
			<fui-data-tag :padding="['10rpx','24rpx']" :width="150" activeColor="#13a1ff" borderColor="#13a1ff" mark markColor="#13a1ff" :options="['入场照片','出场照片']" @change="changePhoto" :modelValue="photo[current]"></fui-data-tag>
		</view>
		<view class="info" v-if="detail">
			<fui-section :padding="['20rpx','0rpx']" title="车辆信息" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="车牌号：" color="#afafaf" :size="28"></fui-text>
					<platetype :plate_number="detail.plate_number" :plate_type="detail.plate_type" :size="28"></platetype>
				</view>
				<view class="line">
					<fui-text text="停车场：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.parking_title" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="停车状态：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.status_txt" :color="statusColor[detail.status]" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="收费规则：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.rules_type_txt" :size="28"></fui-text>
				</view>
			</view>
			<fui-section :padding="['20rpx','0rpx']" title="出入信息" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="入场时间：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.entry_time_txt" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="入场通道：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.entry_barrier" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="入场方式：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.entry_type_txt" color="#000" :size="28"></fui-text>
				</view>
				<block v-if="detail.status==3 || detail.status==4 || detail.status==5 || detail.status==7">
					<view class="line">
						<fui-text text="出场时间：" color="#afafaf" :size="28"></fui-text>
						<fui-text :text="detail.exit_time_txt" color="#000" :size="28"></fui-text>
					</view>
					<view class="line">
						<fui-text text="出场通道：" color="#afafaf" :size="28"></fui-text>
						<fui-text :text="detail.exit_barrier" color="#000" :size="28"></fui-text>
					</view>
					<view class="line">
						<fui-text text="出场方式：" color="#afafaf" :size="28"></fui-text>
						<fui-text :text="detail.exit_type_txt" color="#000" :size="28"></fui-text>
					</view>
				</block>
			</view>
			<block v-if="detail.status==3 || detail.status==4 || detail.status==5 || detail.status==7">
			<fui-section :padding="['20rpx','0rpx']" title="费用信息" isLine></fui-section>
			<view class="line-box">
				<view class="line">
					<fui-text text="费用合计：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(detail.total_fee)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="优惠券：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="detail.coupon?detail.coupon:'无'" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="实际付款：" color="#afafaf" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(detail.pay_fee)" color="#000" :size="28"></fui-text>
				</view>
			</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {formatDuration,parseNumber} from '@/utils/util.js'
	import platetype from '@/components/common/platetype.vue';
	export default {
		components:{
			platetype:platetype,
		},
		data() {
			return {
				statusColor:{'0':'#43afe8','1':'#43afe8','2':'red','3':'green','4':'green','5':'#ffdd60','6':'#ffdd60','7':'red'},
				current: 0,
				photo:['入场照片','出场照片'],
				detail:''
			}
		},
		onLoad(e) {
			this.getDetail(e.records_id);
		},
		methods: {
			...methods,
			formatDuration,
			parseNumber,
			change(e) {
				this.current = e.detail.current;
			},
			changeSwiper:function(e){
				this.current=e.detail.current;
			},
			changePhoto:function(e){
				this.current=e.detail.index;
			},
			getDetail:function(records_id){
				this.$get('records/detail',{id:records_id},true).then(res=>{
					this.detail=res;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	
}
.fui-banner__wrap{
	height: 400rpx;
	padding: 20rpx;
	background-color: #e3e3e3;
	.havapic{
		image{
			height: 400rpx;
			width: 100%;
		}
	}
	.nopic{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		background-color: #fff;
		image{
			height: 400rpx;
			width: 400rpx;
		}
	}
}
.tag-box{
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
}
.info{
	padding:0 20rpx;
	.line-box{
		background-color: #fff;
		padding: 20rpx 0rpx;
		margin-bottom: 20rpx;
		.line{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 70rpx;
		}
	}
}
</style>